<template>
	<div style="padding:0 40px 50px;">
		<div class="table-border" v-if="shopListShow">
			<div class="table-head">{{$t('mer.PendingShopApproval')}}</div>
			  	<el-table :data="shopAuditDatas" fit highlight-current-row style="width: 100%">
				    <el-table-column type="index" fixed :label="$t('index.Number')" width="70"></el-table-column>
				    <el-table-column prop="shopName" :label="$t('agent.Name')"> </el-table-column>
				    <el-table-column prop="name" :label="$t('mer.Merchant')" ></el-table-column>
				    <el-table-column prop="address" :label="$t('agent.Address')"></el-table-column>
				    <el-table-column prop="remarks" :label="$t('mer.ApprovalItem')" :formatter="shopState"></el-table-column>
				    <el-table-column fixed="right" :label="$t('index.Operation')" width="150">
				    	<template scope="scope">
				        	<el-button class="blue-btn mini-btn" @click="shopAuditBtn(scope.row.shopId,scope.row.remarks)">{{$t('button.Approval')}}</el-button>
				     	</template>
				    </el-table-column>
			  	</el-table>
			<div class="pagination-container">
    			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="shopData.page" :page-sizes="[10,20,30,50]" :page-size="shopData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
  			</div>
		</div>
		<!--店铺审核-->
		<div class="shopList" v-show='auditShopShow'>
	    	<el-form :model="auditShopData">
				<table class="form-table" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
				  	<tbody>
				  		<tr>
				  			<td colspan="4" style="text-align: left;">
				  				<div class="table-head">{{$t('mer.NewShop')}}</div>
				  			</td>
				  		</tr>
				  		<tr>
					  		<td style="width: 25%;">{{$t('agent.Name')}}</td>
					  		<td><input type="text" :disabled="disabled" v-model="auditShopData.shopName" id="shopName"/></td>
					  		<td style="width: 25%;">{{$t('mer.ShortName')}}</td>
					  		<td><input type="text" :disabled="disabled" v-model="auditShopData.abbreviation" id="abbreviation"/></td>
					  	</tr>
					  	<tr>
					  		<td>{{$t('agent.Address')}}</td>
					  		<td><input type="text" :disabled="disabled" v-model="auditShopData.address" id="address"/></td>
					  		<td>{{$t('mer.Sector')}}</td>
					  		<td><input type="text" :disabled="disabled" v-model="auditShopData.shopIndustry" id="shopIndustry"/></td>
					  	</tr>
					  	<tr>
					  		<td>{{$t('mec.Contact')}}</td>
					  		<td><input type="text" :disabled="disabled" v-model="auditShopData.shopContact" id="shopContact"/></td>
					  		<td>{{$t('mec.Phone')}}</td>
					  		<td><input type="text" :disabled="disabled" v-model="auditShopData.phone" id="phone"/></td>
					  	</tr>
					  	<tr>
					  		<td>{{$t('mec.Email')}}</td>
					  		<td><input type="text" :disabled="disabled" v-model="auditShopData.email" id="email"/></td>
					  		<td></td>
					  		<td></td>
					  	</tr>
					  	<tr>
					  		<td style="width: 25%;height: 160px;">{{$t('mer.ShopPhotos')}}</td>
					  		<td style="width: 25%;" colspan="3">
					  			<ul id="shopAuditImgList">
					  				<li v-for="item in shopImgList" v-bind:key="item.id">
					  					<img :src="item.src" alt="" />
					  				</li>
					  			</ul>
					  		</td>
					  	</tr>
					</tbody>
				</table>
				<div class="btn-box">
				  	<el-button  class="blue-btn secondary-btn" @click="auditYes(2)">{{$t('cash.reject')}}</el-button>
				  	<el-button  class="green-btn secondary-btn" @click="auditYes(1)">{{$t('button.Approve')}}</el-button>
				</div>
			</el-form>
		</div>
	</div>
	
</template>

<script>
	import { allShopAjax,singleShop,ShopAudit } from 'api/audit/shopAudit/index';
	export default{
		name:'shopAudit',
		data(){
			return {
				headers:{'access-token':localStorage.getItem('access-token')},
				disabled:true,
				shopAuditDatas:[],
				res:[],
				shopData:{},
				shopListShow:true,
				auditShopShow:false,
				auditShopData:{},
//				shopOldArr:[],
				shopNewArr:[],
				shopOldData:{},
				shopNewData:{},
				num:0,
				dataList:[],
				diffData:[],
				companyId:localStorage.getItem('companyId'),
				shopImgList:[],
				optionsI: JSON.parse(localStorage.getItem("queryIndustryObj")),
				// industryId:null,
			}
		},
		created(){
			this.ajaxShopList(this.shopData);
			
		},
		methods:{
			shopState(row){
				let remarks = row.remarks;
				if(remarks === '0' ){
					return remarks = this.$t('mer.NewShop');
				}else if(remarks === '1' ){
					return remarks = this.$t('mer.Amendment');
				}
			},
			ajaxShopList(value){
				value.companyId = localStorage.getItem('companyId');
				allShopAjax(value).then(res=>{
					this.shopAuditDatas=res.value.rows;
					this.res = res.value;
					if(res.value.remarks === '0'){
						this.shopAuditDatas.remarks=this.$t('mer.NewShop');
					}
					if(res.value.remarks === '1'){
						this.shopAuditDatas.remarks=this.$t('mer.Amendment');
					}
				})
			},
			//店铺相片
			shopPhotos(res){
				this.shopAuditDatas.storePhotosUrl = res.value[0];
			},
			//店铺审核按钮
			shopAuditBtn(shopId,remarks){
				this.shopListShow=false;
				this.auditShopShow=true;
				let shopMsg={
					shopId:shopId,
					remarks:remarks,
					companyId:this.companyId
				};
				singleShop(shopMsg).then(res=>{
					this.dataList=res.value;
					this.shopOldData=res.value[1];
					this.shopNewData=res.value[0];
					if(res.value.length==1){
						this.auditShopData=this.shopNewData;
					}else{
						this.auditShopData=this.shopNewData;
						this.shopNewArr=Object.getOwnPropertyNames(this.shopNewData);
						for(let i =0;i<this.shopNewArr.length;i++){
							const propName=this.shopNewArr[i];
							if(this.shopNewData[propName]!==this.shopOldData[propName]){
								this.num++;
								this.diffData[this.num]=document.getElementById(propName);
							}
						}
						for(let j=0;j<this.diffData.length;j++){
							if(this.diffData[j] != null){
								this.diffData[j].style.color='red';
							}
						}
					};
					// if (this.auditShopData.shopIndustry) {
					// 	this.industryId = this.auditShopData.shopIndustry;
					// 	this.auditShopData.shopIndustry = Number(this.auditShopData.shopIndustry) - 11;
					// 	this.auditShopData.shopIndustry = this.optionsI[this.auditShopData.shopIndustry].industryName;
					// }

					this.shopImgList[0]={}; 
					this.shopImgList[0].src = this.auditShopData.storePhotosUrl;
					this.shopImgList[1]={}; 
					this.shopImgList[1].src = this.auditShopData.storePhotosUrl1;
					this.shopImgList[2]={}; 
					this.shopImgList[2].src = this.auditShopData.storePhotosUrl2;
					this.shopImgList[3]={}; 
					this.shopImgList[3].src = this.auditShopData.storePhotosUrl3;
					this.shopImgList[4]={}; 
					this.shopImgList[4].src = this.auditShopData.storePhotosUrl4;
					this.shopImgList[0].id = 0;
					this.shopImgList[1].id = 1;
					this.shopImgList[2].id = 2;
					this.shopImgList[3].id = 3;
					this.shopImgList[4].id = 4;
					for(let i =this.shopImgList.length-1;i>=0;i--){
						if(this.shopImgList[i].src === null){
							this.shopImgList.splice(i,1);
						}
					}
				})
			},
			//审核是否通过
			auditYes(value){
//				let msg = this.dataList.length === 1 ? this.$t("hint.TheAdditonOf") : this.$t("hint.TheShopInfoChange");
//				let yes = value === 1 ? this.$t("button.Approve") : this.$t("button.Approve1");
				let msg;
				if(this.dataList.length === 1){
		      		//店铺进件申请
			      	msg = value === 1 ? this.$t("hint.TheAdditonOf8") : this.$t("hint.TheAdditonOf9");
			      }else{
			      	//店铺信息修改
			      	msg = value === 1 ? this.$t("hint.TheAdditonOf6") : this.$t("button.TheAdditonOf7");
			      }
				
				let auditShopData={
					shopId:this.auditShopData.shopId,
					state:value
				};
				this.$msgbox({
			        title: this.$t("hint.Alert"),
			        message: msg,
			        showClose:false,
			        showCancelButton: true,
			        confirmButtonText: this.$t("button.OK"),
			        cancelButtonText: this.$t("button.Cancel"),
			        beforeClose: (action, instance, done) => {
			        	if(action == 'confirm'){
							this.auditShopData.state=value;
							// this.auditShopData.shopIndustry = this.industryId;
							this.aduitFn(this.auditShopData);
				        }
				        done();
			        }
		        })
			},
			//店铺审核通过与否接口
			aduitFn(state){
				ShopAudit(state).then(res=>{
					if(res.code === 0){
						this.auditShopShow=false;
						this.shopListShow=true;
						this.ajaxShopList(this.shopData);
					}
				})
			},
			 //pageSize 改变时会触发
			handleSizeChange(val){
				this.shopData.pageSize = val;
				this.ajaxShopList(this.shopData);
			},
			//currentPage 改变时会触发
			handleCurrentChange(val){
				this.shopData.page = val;
				this.ajaxShopList(this.shopData);
			}
		}
	}
</script>

<style scoped="scoped">
.el-table::before{
	height: 0;
}
</style>